<template>
  <div>
    <navigationBar/>
    <div class="teacher-detail-container">
      <div class="teacher">
        <div class="teacher-info">
          <div class="name">
            <p style="margin-bottom: 10px">{{ teacherInfo.teacher.level | formatTeacherLevel }}</p>
            <p>{{ teacherInfo.teacher.name }}</p>
          </div>
          <div class="introduction">
            <p class="intro">{{ teacherInfo.teacher.intro }}</p>
            <p class="career">{{ teacherInfo.teacher.career }}</p>
          </div>
        </div>
        <div class="teacher-avatar">
          <v-avatar size="200">
            <v-img :src="teacherInfo.teacher.avatar">
              <template v-slot:placeholder>
                <v-icon>
                  fas fa-user-graduate
                </v-icon>
              </template>
            </v-img>
          </v-avatar>
        </div>
      </div>
      <div class="course-list-title">
        <v-icon color="primary">
          fas fa-book
        </v-icon>
        <span>课程列表</span>
      </div>
      <div class="detail-content course-card-container justify-start">
        <div
            class="course-card my-2"
            v-for="course in teacherInfo.courseList"
            :key="course.id"
            v-ripple>
          <v-img
              :src="course.pic"></v-img>
          <div class="course-info">
            <div>
              <p class="course-title">{{ course.name }}</p>
              <p class="course-teacher">{{ teacherInfo.teacher.name }}</p>
              <p class="course-category">{{ course.st | formatCourseCategory }}</p>
            </div>
            <div class="course-price align-end">
              <p class="price__current">
                {{ course.price | formatPrice }}
              </p>
              <p class="price__original" v-if="course.price_old">
                {{ course.price_old | formatPrice }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navigationBar from "@/components/navigationBar/navigationBar";
import {teacherInfo} from "@/views/teacherDetail/mockData";
import {getTeacherAllInfo} from "../../api";
import {formatCourseCategory} from "@/common/js/utils";

export default {
  name: "teacherDetail",
  components: {
    navigationBar
  },
  data() {
    return {
      teacherId: '', //讲师ID
      teacherInfo: {}, //讲师信息
    }
  },
  methods: {
    // 初始化
    init() {
      this.teacherId = this.$route.params.teacherId ?? '';
      this.getTeacherInfo();
      // this.teacherInfo = teacherInfo;
    },
    // 获取讲师信息数据
    async getTeacherInfo() {
      await getTeacherAllInfo(this.teacherId).then(res => {
        this.teacherInfo = res.data;
        console.log(this.teacherInfo)
      }).catch(error => {
        console.error(error);
      });
    }
  },
  filters: {
    /**
     * 格式化讲师头衔
     * @param {String} level 讲师头衔ID
     * @return {String} 格式化后的讲师头衔
     */
    formatTeacherLevel(level) {
      return ['', '高级讲师', '首席讲师'][Number(level)];
    },
    /**
     * 格式化课程分类
     * @param {String} st 课程小分类ID
     * @return {String} 格式化后的课程分类文字
     */
    formatCourseCategory(st) {
      const category = formatCourseCategory(st);
      return `${category.mt} / ${category.st}`;
    }
  },
  mounted() {
  },
  created() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
@import "teacherDetail";
</style>